<template>
    <div class="color-fff pl-20 pr-20 mt-20">
        <div v-if="!loading">
            <div v-if="recommend.length>0">
                <el-row :gutter="20">
                    <el-col :span="span1">
                        <div @click="toDetail(recommend[0])" class="position-relative cursor-pointer">
                            <el-image :src="recommend[0].thumbnail" fit="cover" style="width: 100%; height: 500px;border-radius:10px"></el-image>
                            <div class="creation-name color-fff">{{recommend[0].name}}</div>
                        </div>
                    </el-col>
                    <el-col :span="span2">
                        <div :class="{'mt-16':index>0}" :key="index" @click="toDetail(recommend[index+1])" class="position-relative cursor-pointer" v-for="(item,index) in recommend.length-1">
                            <el-image :src="recommend[index+1].thumbnail" fit="cover" style="width: 100%; height: 240px;border-radius:10px"></el-image>
                            <div class="creation-name color-fff">{{recommend[index+1].name}}</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div v-else>暂无数据</div>
            <div class="mt-30 flex align-center">
                <div :class="{'choose-category':choose_category==-1}" @click="recommendFun()" class="color-999 cursor-pointer">推荐视频</div>
                <div :class="{'choose-category':choose_category==index}" :key="index" @click="switchCategorys(index,item)" class="color-999 ml-18 cursor-pointer" v-for="(item,index) in categorys">{{item.name}}</div>
            </div>
            <div class="mt-30">
                <el-row :gutter="20">
                    <el-col :class="{'mt-18':index>5}" :key="index" :span="4" v-for="(item,index) in data">
                        <el-image :src="item.thumbnail" @click="toDetail(item)" class="cursor-pointer" fit="cover" style="width: 100%; height: 150px;border-top-left-radius:10px;border-top-right-radius:10px"></el-image>
                        <div class="pd-10 bg-action" style="border-bottom-left-radius:10px;border-bottom-right-radius:10px">
                            <div class="text-line1">
                                <span>{{item.name}}</span>
                                <span class="pl-10 color-eee" v-if="!item.done">(更新至{{item.current_episode}}集)</span>
                                <span class="pl-10 color-eee" v-else>(全{{item.episodes}}集)</span>
                            </div>
                            <div class="flex align-center jus-between mt-10">
                                <div class="flex align-center font-13 color-fff cursor-pointer">
                                    <el-avatar :size="20" :src="item.user_info.avatar"></el-avatar>
                                    <span class="pl-6">{{item.user_info.name}}</span>
                                </div>
                                <div class="flex align-center font-13 color-999 cursor-pointer">
                                    <el-image :src="require('@/assets/icon/video/viewed.png')" fit="cover" style="width: 18px; height: 18px;"></el-image>
                                    <span class="pl-6">{{item.total_viewed}}</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="flex jus-center" style="margin-top:30vh" v-else>
            <el-image :src="require('@/assets/gif/re-video-loading.gif')" fit="cover" style="width: 120px; height: 60px"></el-image>
        </div>
        <detail :collection="collection" ref="detail"></detail>
    </div>
</template>

<script>
import detail from './detail'
export default {
    components: {
        detail,
    },
    data() {
        return {
            recommend: [],
            categorys: [],
            choose_category: -1,
            data: [],
            collection: null,
            loading: true,
        }
    },
    computed: {
        span1() {
            return this.recommend.length > 1 ? 16 : 24
        },
        span2() {
            return this.recommend.length > 1 ? 8 : 0
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.getRecommend()
            this.getCategorys()
            this.getCollection()
        },
        getRecommend() {
            this.loading = true
            this.$request
                .get('/creation-collection/index_suggest/9', { type: 'hot' })
                .then((res) => {
                    this.recommend = res
                    this.loading = false
                })
                .catch((err) => {})
        },
        getCategorys() {
            this.$request.get('/creation-collection/category', { type: 'create' }).then((res) => {
                this.categorys = res
            })
        },
        getCollection(id = null) {
            let param = {}
            if (this.categorys[this.choose_category]) {
                param.categorys = [this.categorys[this.choose_category].id]
            }
            param.has_creation = 1
            param.size = 18
            if(id){
                param.categorys[0] = id
            }else{
                delete param.categorys
            }
            this.$request.get('/creation-collection/long_video_list', param).then((res) => {
                this.data = res.items
            })
        },
        toDetail(data) {
            // this.$router.push({ path: '/long/' + data.collection_id })
             console.log(data, 1112222)
            this.collection = data
            this.$nextTick(() => {
                this.$refs.detail.visible = true
                this.$refs.detail.getCollection()
            })
        },

        switchCategorys(index,item){
            console.log('item',item)
            this.choose_category=index
            this.getCollection(item.id)
        },
        recommendFun(){
            this.choose_category=-1 
            this.getCollection()
        }
        
        
    },
}
</script>

<style lang="scss" scoped>
.creation-name {
    position: absolute;
    bottom: 20px;
    left: 15px;
}
.choose-category {
    font-size: 17px;
    font-weight: bold;
    color: #fff !important;
}
</style>